import React from 'react';
import style from './Summer.module.css';
import Summer5 from '../../../assets/images/Recommendedimages/5.jpg';
import Summer6 from '../../../assets/images/Recommendedimages/6.jpg';
import Summer7 from '../../../assets/images/Recommendedimages/7.jpg';
import Summer8 from '../../../assets/images/Recommendedimages/8.jpg';
import Summer9 from '../../../assets/images/Recommendedimages/9.jpg';
import Summer10 from '../../../assets/images/Recommendedimages/10.jpg';
import Summer11 from '../../../assets/images/Recommendedimages/11.jpg';
import Summer12 from '../../../assets/images/Recommendedimages/12.jpg';
// import Canvas from '../../Canvas/Canvas';

const sections = [
  { title: '夏天', imageList: [Summer5, Summer6] },
  { title: '花海', imageList: [Summer7, Summer8] },
  { title: '科技', imageList: [Summer9, Summer10] },
  { title: '天空', imageList: [Summer11, Summer12] },
];

function Summer() {
  const handleDragStart = (event:any, src:any) => {
    event.dataTransfer.setData('text/plain', src);
  };

  return (
    <div className={style.Summer}>
      {sections.map(({ title, imageList }) => (
        <div key={title}>
          <p>
            {title} <span>全部</span>
          </p>
          <div className={style.imgContainer}>
            {imageList.map((src, index) => (
              <div key={index} className={style.img}>
                <img 
                  src={src} 
                  alt={title} 
                  draggable 
                  onDragStart={(event) => handleDragStart(event, src)} 
                />
              </div>
            ))}
          </div>
        </div>
      ))}
      {/* <Canvas /> */}
    </div>
  );
}

export default Summer;
